<!--
 * @Descripttion: 
 * @version: 
 * @Author: weihua.yao
 * @Date: 2021-04-14 00:14:19
 * @LastEditTime: 2021-04-14 00:14:35
-->
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.highcharts.com.cn/highstock/highstock.js"></script>
    <style>
      #container {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      Highcharts.setOptions({
        lang: {
          rangeSelectorZoom: ''
        }
      });
      fetch('https://data.jianshukeji.com/stock/history/000001')
        .then(data => data.json())
        .then(data => {
          if(data.code !== 1) {
			  	  alert('读取股票数据失败！');
				    return false;
          }
          data = data.data;
          var ohlc = [],
            volume = [],
            dataLength = data.length,
          // set the allowed units for data grouping
          groupingUnits = [[
            'week',                         // unit name
            [1]                             // allowed multiples
          ], [
            'month',
            [1, 2, 3, 4, 6]
          ]],
          i = 0;
          for (i; i < dataLength; i += 1) {
            ohlc.push([
              data[i][0], // the date
              data[i][1], // open
              data[i][2], // high
              data[i][3], // low
              data[i][4] // close
            ]);
            volume.push([
              data[i][0], // the date
              data[i][5] // the volume
            ]);
          }
          // create the chart
          var chart = Highcharts.stockChart('container', {
            rangeSelector: {
              selected: 1,
              inputDateFormat: '%Y-%m-%d'
            },
            title: {
              text: '平安银行历史股价'
            },
            xAxis: {
              dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%m-%d',
                week: '%m-%d',
                month: '%y-%m',
                year: '%Y'
              }
            },
            tooltip: {
              split: false,
              shared: true,
            },
            yAxis: [{
              labels: {
                align: 'right',
                x: -3
              },
              title: {
                text: '股价'
              },
              height: '65%',
              resize: {
                enabled: true
              },
              lineWidth: 2
            }, {
              labels: {
                align: 'right',
                x: -3
              },
              title: {
                text: '成交量'
              },
              top: '65%',
              height: '35%',
              offset: 0,
              lineWidth: 2
            }],
            series: [{
              type: 'candlestick',
              name: '平安银行',
              color: 'green',
              lineColor: 'green',
              upColor: 'red',
              upLineColor: 'red',
              tooltip: {
              },
              navigatorOptions: {
                color: Highcharts.getOptions().colors[0]
              },
              data: ohlc,
              dataGrouping: {
                units: groupingUnits
              },
              id: 'sz'
            }, {
              type: 'column',
              data: volume,
              yAxis: 1,
              dataGrouping: {
                units: groupingUnits
              }
            }]
          })
        })
    </script>
  </body>
</html>